<template>
	<view>
		<uni-popup ref="popup" border-radius="10px 10px 10px 10px">
			<uni-card :title="title" thumbnail="" extra="额外信息" note="Tips">
				<template v-slot:title>
					<view class="gl-header" style="border-bottom: 2px solid #aaa;padding: 10px 0;">
						<view class="gl-header-left">
							<text>{{title}} - ID:{{staffData.id}}</text>
						</view>
						<view class="gl-header-right">
							<uni-icons type="closeempty" size="20" color="#fff" class="gl-button-icon" @tap="eventClose"
								style="background-color: #dd524d;padding: 2px;border-radius: 2px;"></uni-icons>
						</view>
					</view>
				</template>
				<view class="" style="width: 100%;">
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="" style="display: flex;align-items: start;gap: 10px;">
							<view
								style="display: flex;align-items: center;gap: 10px;position: relative;background-color: #aaa;border-radius: 4px;">
								<image :src="sConf.cos + (staffData?.face || '/media/default/default_0.png')"
									mode="scaleToFill"
									style="width: 40px;height: 40px;border-radius: 50% 50%;background-color: #aaa;">
								</image>
								<uni-icons type="person-filled" size="24" style="position: absolute;left: 0;bottom: 0;"
									:color="staffData?.gender === 1? '#5555ff':'#ff55ff'"></uni-icons>
							</view>
							<view class="">
								<view class="" style="display: flex;gap: 5px;">
									<text>昵称:</text>
									<text style="font-weight: bold;padding-right: 20px;"
										@click="copyReqsnOrder(staffData?.nicename)">{{staffData?.nicename}}</text>
								</view>
								<view class="" style="display: flex;gap: 5px;">
									<text>电话:</text>
									<text style="font-weight: bold;padding-right: 20px;"
										@click="copyReqsnOrder(staffData?.phone)">{{staffData?.phone}}</text>
								</view>
							</view>
							<view class="">
								<view class="" style="display: flex;gap: 5px;">
									<text>权益等级:</text>
									<text style="font-weight: bold;padding-right: 20px;"></text>
								</view>
								<view class="" style="display: flex;gap: 5px;">
									<text>注册时间:</text>
									<text style="font-weight: bold;padding-right: 20px;">{{staffData?.created}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "pop-staff-card",
		data() {
			return {
				title: '用户信息面板',
				sConf: getApp().globalData,
				staffData: null
			};
		},
		methods: {
			/**
			 * 复制订单号
			 */
			copyReqsnOrder(e) {
				uni.setClipboardData({
					data: e
				})
			},
			open(e) {
				this.staffData = e
				this.$refs.popup.open()
			},
			eventClose() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>